<template>
  <div>
    <!-- {{isEdit?"数据编辑":"数据添加"}} -->
    <el-card class="box-card">
      <div class="header" slot="header">城市区域{{isEdit?"数据编辑":"数据添加"}}</div>
      <el-form ref="form" v-model="optionsCity" label-width="80px">
        <el-form-item label="区域Id" v-if="isEdit">
          <el-input v-model="areaId" disabled></el-input>
        </el-form-item>
        <el-form-item label="城市Id" v-if="isEdit">
          <el-input v-model="Id" disabled placeholder="显示城市Id"></el-input>
        </el-form-item>
        <el-form-item label="区域名称">
          <el-input v-model="text" placeholder="请输入区域名称"></el-input>
        </el-form-item>
        <el-form-item label="城市名称">
          <el-select v-model="Id" placeholder="请选择城市">
            <el-option
              :label="item.name"
              :value="item.cityId"
              v-for="(item) in optionsCity"
              :key="item.cityId"
              @click.native="chiseCity(item)"
            ></el-option>
          </el-select>
        </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit">{{isEdit?"保存修改":"提交添加"}}</el-button>
        <el-button @click="cleartext">{{isEdit?"取消":"重置"}}</el-button>
      </el-form-item>
    </el-form>
         </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Id: "",
      text: "",
      a: "",
      areaId: "",
      loading: false,

      optionsCity: []
    };
  },
  methods: {
    //点击选择城市
    chiseCity(city) {
      console.log("city", city);
      this.Id = city.cityId;
    },

    //清空文本
    cleartext(){
      if(this.isEdit){
        this.$router.push('/area/list')
      }
     else{
        this.text=""
     }
      
    },

    // 获取城市的数据
    getCity() {
      const url = "/city/allCity";
      this.$axios
        .get(url)
        .then(res => {
          this.optionsCity = res.cities;
          console.log("城市的值：", this.optionsCity);
        })
        .catch(err => {
          console.log("获取数据失败");
        });
    },

    //获取数据
    getdata(areaId) {
      const url = "/area/findById?areaId=" + areaId;
      this.$axios
        .post(url)
        .then(res => {
          this.Id = res.area.cityId;
          this.text = res.area.name;
          console.log("获取的res", res);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    onSubmit() {
      console.log("传过来的Id", this.areaId);
      console.log("Id", this.Id);
      console.log("text", this.text);
      var cityName = "";
      for (var i = 0; i < this.optionsCity.length; i++) {
        if (this.optionsCity[i].cityId == this.Id) {
          cityName = this.optionsCity[i].name;
        }
      }
      console.log("cityName", cityName);
      let data = {
        areaId: this.areaId,
        cityId: this.Id,
        cityName: cityName,
        name: this.text
      };
      this.loading = true;
      // let url = "/area/edit"
      let url = `/area/${this.isEdit ? "edit" : "add"}`;
      this.$axios
        .post(url, data)
        .then(res => {
          console.log("res", res);
          this.$message.success(`${this.isEdit ? "修改" : "添加"}成功`);
          var $this = this; //注意定定时器里，this指向的是Window,但我们需要指向VueComponent
          if (this.isEdit) {
            setTimeout(function() {
              this.loading = false;
              console.log("this", this);
              console.log("$this", $this);
              $this.$router.push("/area/list");
            }, 5000);
          } else {
            this.loading = false;
          }
        })
        .catch(err => {
          this.loading = false;
          console.log("修改", err);
          this.$message.error(`${this.isEdit ? "修改数据" : "添加数据"}失败`);
        });
      console.log("this.loading", this.loading);
    }
  },
  created() {
    this.getCity();
    this.areaId = this.$route.params.areaId;
    if (this.isEdit) {
      this.getdata(this.areaId);
    }
  },
  computed: {
    isEdit() {
      console.log(this.$route.path.includes("edit"));
      return this.$route.path.includes("edit");
    }
  }
};
</script>> 

<style lang="less" scoped>
.header {
  font-size: 22px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-input,
.el-select {
  width: 500px;
}
.box-card {
  width: 100%;
  height: 85vh;
}
</style>